<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../static/layui/css/layui.css" tppabs="https://www.layui.site/layui/dist/css/layui.css"  media="all">
    <script src="../../static/layui/layui.js" charset="utf-8"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>

<script>
    layui.use(['tree', 'util'], function(){
        var tree = layui.tree
            ,util = layui.util
            ,data1 = []

        layui.$.ajax({
            type: "POST",
            url: "/ams-admin/ams/menu/JsonTree",
            contentType: "application/json",
            success: function (r) {
                data1 = r
                //仅节点左侧图标控制收缩
                tree.render({
                    elem: '#test12'
                    , data: data1
                    , id: 'demoId1'
                    ,showCheckbox: true  //是否显示复选框
                    , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
                });
            }
        });

        //按钮事件
        util.event('lay-demo', {
            getChecked: function(othis){

                var menuIdList = []
                ,menuNameList = [];
                debugger
                var checkedData = tree.getChecked('demoId1')//获取选中节点的数据
                    ,checkId = checkedData[0].children
                    ,checkName = checkedData[0].children
                for(var k in checkId){
                    menuIdList.push(checkId[k].id)
                    menuNameList.push(checkName[k].label)
                }
                layer.msg("选择成功！",{icon: 6, time: 1000})
                window.parent.$("#menuNameList").val(menuNameList)
                window.parent.$("#menuIdList").val(menuIdList)
            }
            ,setChecked: function(){
                tree.setChecked('demoId1', [1,2,3,4,5]); //勾选指定节点
            }
            ,reload: function(){
                //重载实例
                tree.reload('demoId1', {

                });
            }
        });
    });
</script>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>选取菜单</legend>
</fieldset>
<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">确定</button>
    <!--    <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>-->
    <!--    <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>-->
</div>

<div id="test12" class="demo-tree-more"></div>


<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

</body>
</html>